<template>
  <div id="box">
    <!-- 框架 -->
    <el-container class="container">
        <!-- 头部区域 -->
      <el-header class="header">
        <h2>{{ $t('header.title') }}</h2>

        <div>
          <el-button type="success" v-btn-key="'TC'" round @click="langageSelect"> {{ langage === 'zh' ? '中文' : '英文' }}</el-button>
          <el-button type="success" v-btn-key="'USER'" round @click="SelectBg"> 主题 </el-button>
        </div>

      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <MyMenu :menuList="menuList"></MyMenu>
        </el-aside>
        <!-- 内容区域 -->
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MyMenu from '../components/MyMenu';
import setBg from '../mixins/setBg';
// import axios from 'axios'
import {getMenu} from '../api/menu.js'
export default {
    mixins: [setBg],
    data() {
        return {
            menuList: [],
            langage: localStorage.getItem('langage') || 'zh'
        }
    },
    components: {
        MyMenu
    },
    created() {
        this.getMenus()
    },
    methods: {
        async getMenus() {
           const res = await getMenu()
           this.menuList = res.data.data;
        },
        langageSelect() {
          if(this.langage === 'zh') {
            this.$i18n.locale = 'en'
            this.langage = 'en'
            localStorage.setItem('langage', 'en')
          }else {
            this.$i18n.locale = 'zh'
            this.langage = 'zh'
            localStorage.setItem('langage', 'zh')
          }

        },
        SelectBg() {
          changeBg(true)
        }
    }
};
</script>

<style lang="scss">
#box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container {
  height: 100%;
}
.header {
  background: #5cb87a;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2 {
    margin: 0;
    padding: 0;
    line-height: 60px;
  }
}
</style>